<template>
    <div>
        <div id="big">
            <div class="head">
                <span><router-link to="/message"> <van-icon name="revoke" /> </router-link></span>
                <span> 发渔汛 </span>
                <span @click="Toast"> 完成 </span>
            </div>

            <p class="top">渔汛主题 <b style="color:red">必填项</b></p>
            <p><input class="in" type="text" placeholder="渔汛命名"></p>
            <p class="top">时间与日期</p>
            <p>
                <van-cell title="选择单个日期 > "  :value="date"  @click="showw = true" /> 
                <van-calendar v-model="showw"  @confirm="onConfirm" />  
            </p>
            <p class="top">方式与鱼种</p>
            <p>
                <van-field
                 v-model="fieldValue"
                 is-link
                 readonly
                 label="活动属性"
                 placeholder="请选择活动鱼种"
                 @click="show = true"
               />
               <van-popup v-model="show" round position="bottom">
                 <van-cascader
                   v-model="cascaderValue"
                   title="请选择鱼种"
                   :options="options"
                   @close="show = false"
                   @finish="onFinish"
                 />
               </van-popup>
            </p>
            <p class="top">备注与描述<b style="color:red">必填项</b></p>
            <input class="inp" type="text" placeholder="加点描述 让渔汛更全面">
            <p>视频与图片</p>
            <input class="inpu" type="text">
        </div>
    </div>
</template>

<script>
export default {
    name: 'HhhIndex',

    data() {
        return {
            date:'',
            show:false,
            showw:false,
            fieldValue: '',
            cascaderValue: '',
            options: [
        {
          text: '鲫鱼',
          children: [{ text: '鲫鱼'}],
        },
        {
          text: '鲤鱼',
          children: [{ text: '鲤鱼'}],
        },
        {
          text: '家养',
          children: [{ text: '家养'}],
        },
        {
          text: '野生',
          children: [{ text: '野生'}],
        },
        {
          text: '其他',
          children: [{ text: '其他'}],
        },
      ],
    };
  },
        
    

    mounted() {
        
    },

    methods: {
        onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
        formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showw = false;
      this.date = this.formatDate(date);
    },
    Toast(){
        this.$toast({
          message:'今天发布渔汛次数已达上限，请明天再来',
          position:'middle'
        });
      }
    },
};
</script>

<style scoped>
#big{
    width: 90%;
    margin: 0 auto;
    color: gray;
}
.head{
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
in{
    border: 1px solid gray;
}
.top{
    background-color: #F8F8FF;
    border-radius: 5px;
    height: 25px;
}
.inp{
    width: 100%;
    height: 120px;
    border: 1px solid gray;
    border-radius: 10px;
}
.inpu{
    width: 100%;
    height: 80px;
    border: 1px solid gray;
    border-radius: 10px;
}
</style>